<!--
  ~ The MIT License (MIT)
  ~
  ~ Copyright (c) 2019 ‭‭‭‭‭‭‭‭‭‭‭‭[smallbun] www.smallbun.org
  ~
  ~ Permission is hereby granted, free of charge, to any person obtaining a copy of
  ~ this software and associated documentation files (the "Software"), to deal in
  ~ the Software without restriction, including without limitation the rights to
  ~ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
  ~ the Software, and to permit persons to whom the Software is furnished to do so,
  ~ subject to the following conditions:
  ~
  ~ The above copyright notice and this permission notice shall be included in all
  ~ copies or substantial portions of the Software.
  ~
  ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
  ~ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
  ~ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
  ~ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  ~ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  -->

<!DOCTYPE HTML>
<!--suppress ALL-->
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:include="fragments/include  :: header('个人信息')"></div>
    <link rel="stylesheet" th:href="@{/static/modules/manage/css/user/profile.css}"/>
</head>
<body class="list-body">
<section class="content">
    <div class="row">
        <div class="col-xs-3" style="height: 100% ;padding-right: 5px">
            <div class="ibox">
                <div class="ibox-title dashboard-header gray-bg">
                    <h5>个人资料</h5>
                </div>
                <div class="ibox-content">
                    <div style="text-align: center;">
                        <p><img id="head-portrait-url" width="120" height="120"
                                th:src="${user.headPortraitUrl}"></p>
                        <p class="avatar-txt-margin" style="text-align: center">
                            <a data-toggle="modal" style="cursor:pointer" data-target="#modal-default">修改头像</a>
                        </p>
                    </div>
                    <ul class="list-group list-group-unbordered">
                        <li class="list-group-item">
                            <b style="font-weight: 400">用户名：</b>
                            <p class="pull-right"
                               th:text="${user.username}"></p>
                        </li>
                        <li class="list-group-item">
                            <b style="font-weight: 400">上次登录地：</b>
                            <p class="pull-right"
                               th:text="${user.lastLoginAddress}"></p>
                        </li>
                        <li class="list-group-item">
                            <b style="font-weight: 400">上次登录IP：</b>
                            <p class="pull-right"
                               th:text="${user.lastLoginIp}"></p>
                        </li>
                        <li class="list-group-item">
                            <b style="font-weight: 400">上次登录时间：</b>
                            <p class="pull-right"
                               th:text="${#dates.format(user.lastLoginTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-xs-9" style="height: 100%; padding-left: 0px">
            <div class="ibox">
                <div class="ibox-title dashboard-header gray-bg">
                    <h5>基本资料</h5>
                </div>
                <div class="ibox-content">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#user_info" data-toggle="tab" aria-expanded="true">基本资料</a>
                            </li>
                            <li class=""><a href="#modify_password" data-toggle="tab" aria-expanded="false">修改密码</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <!--用户信息-->
                            <div class="tab-pane active" id="user_info">
                                <form class="form-horizontal" th:action="@{/user/saveOrUpdate}" id="updateUserInfoForm">
                                    <!--隐藏ID-->
                                    <input th:value="${user.id}" name="id" id="id" type="hidden">
                                    <div class="form-group">
                                        <label for="nickName" class="col-sm-2 control-label">昵称：</label>
                                        <div class="col-sm-10">
                                            <input type="text" autocomplete="off" class="form-control required"
                                                   id="nickName"
                                                   name="nickName" th:value="${user.nickName}"
                                                   placeholder="请输入昵称">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="phone" class="col-sm-2 control-label">手机：</label>

                                        <div class="col-sm-10">
                                            <input type="tel" autocomplete="off" class="form-control required"
                                                   id="phone" name="phone" maxlength="11"
                                                   th:value="${user.phone}"
                                                   placeholder="请输入手机号">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="email" class="col-sm-2 control-label">邮箱：</label>

                                        <div class="col-sm-10">
                                            <input type="email" autocomplete="off" class="form-control required email"
                                                   name="email" id="email" th:value="${user.email}"
                                                   placeholder="请输入邮箱" data-inputmask="'alias':'email'" data-mask>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" onclick="updateUserInfo()" class="btn ibtn-primary">提交
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!--修改密码-->
                            <div class="tab-pane" id="modify_password">
                                <form class="form-horizontal" id="changPasswordForm" th:action="@{/user/changPassword}"
                                      method="post">
                                    <div class="form-group">
                                        <label for="oldPassword" class="col-sm-2 control-label">旧密码：</label>
                                        <div class="col-sm-10">
                                            <input type="password" title="请输入旧密码" class="form-control required"
                                                   id="oldPassword" name="oldPassword"
                                                   placeholder="请输入旧密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="newPassword" class="col-sm-2 control-label">新密码：</label>

                                        <div class="col-sm-10">
                                            <input type="password" title="请输入新密码" class="form-control required"
                                                   id="newPassword" name="newPassword"
                                                   placeholder="请输入新密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="confirmPassword" class="col-sm-2 control-label">确认密码：</label>
                                        <div class="col-sm-10">
                                            <input type="password" title="两次密码不相同" class="form-control required"
                                                   id="confirmPassword" equalto="#newPassword"
                                                   name="confirmPassword"
                                                   placeholder="请确认密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" onclick="changPassword()" class="btn ibtn-primary">
                                                提交
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改头像</h4>
                </div>
                <div class="modal-body">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#personality_avatar" data-toggle="tab"
                                                  aria-expanded="true">个性头像</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <!--本地头像库-->
                            <div class="tab-pane active" id="personality_avatar">
                                <div>
                                    <p class="margin-top-2">从个性头像库里选择一张图片作为头像</p>
                                    <div class="clearfix">
                                        <div class="pull-left default-avatar-wrap">
                                            <ul class="default-avatar-list">
                                                <li class="ng-scope selected"><img
                                                        src="https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_beauty.jpg">
                                                </li>
                                                <li class="ng-scope"><img
                                                        src="https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_colleagues.jpg">
                                                </li>
                                                <li class="ng-scope"><img
                                                        src="https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_family.jpg">
                                                </li>
                                                <li class="ng-scope"><img
                                                        src="https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_friend.jpg">
                                                </li>
                                                <li class="ng-scope"><img
                                                        src="https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg">
                                                </li>
                                                <li class="ng-scope"><img
                                                        src="https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_trade.jpg">
                                                </li>
                                            </ul>
                                        </div>
                                        <!--头像浏览-->
                                        <div class="pull-left text-center head-sculpture"><p>
                                            <img id="browse-img"
                                                 src="https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_beauty.jpg">
                                        </p>
                                            <p>头像预览</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" onclick="avatarSubmit()" class="btn ibtn-primary" data-dismiss="modal">确定
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
<div th:include="fragments/include :: include-js"></div>
<div th:include="fragments/include :: jquery-validate-js"/>
<script th:src="@{/static/modules/manage/js/user/profile.js}"></script>
</html>